<template>
    <div class="pagerBox">
        <div class="block">
            <span class="demonstration"></span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[3,5,7,9]"
                :page-size="limit" layout="total,slot,sizes" :total="total">
                <span>{{`当前第${page}页，共${lastPage}页` }}</span>
            </el-pagination>
        </div>
        <div class="pagerBox1">
            <el-pagination background @size-change="handleSizeChange" :firstPage="firstPage"
                @current-change="handleCurrentChange" :page-sizes="[3, 5, 7, 9]" :page-size="limit" layout="slot"
                :total="total">
                <el-button :disabled="page === firstPage" class="first-pager" @click="toFirstPage">首页</el-button>
            </el-pagination>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[3, 5, 7, 9]" :page-size="limit" :lastPage="lastPage"
                layout="prev, pager, next, slot" :total="total" >
                <el-button :disabled="page ===lastPage" class="first-pager" @click="toLastPage">尾页</el-button>
            </el-pagination>
        </div>
    </div>


</template>

<script>
export default {
    name: "pager",
    data() {
        return {
            firstPage: 1,

        }
    },
    props: ["page", "limit", "total","lastPage"],//page当前页数，limit多少条一页，total总共多少页,

    methods: {
        handleSizeChange(val) {
            this.$emit("handleSizeChange", val)
        },
        handleCurrentChange(val) {
            this.$emit("handleCurrentChange", val)

        },
        toFirstPage() {
            this.$emit("toFirstPage", 1)
        },
        toLastPage(val) {
        this.$emit('toLastPage',this.lastPage )
        
      },
    }

}
</script>

<style  scoped>
.pagerBox{
    display: flex;
    justify-content: space-between;
}
.pagerBox1{
    display: flex;
}

</style>